<!-- glance 店铺购物车单页模板 -->
<template name="glanceShopcart">
	<view class="glance-shop-cart" style="background-color: #F5F5F5;" @touchmove="scrollhoming" @touchend="scrollhomed">
		<!-- 顶部广告图 -->
		<!-- 营销活动：全场加价购、满减折上折、优惠券等等 -->
		<!-- <view style="height: 60px;background-color: #FFFFFF;">这里是广告区域</view> -->
		<!-- 我是分割 -->
		<!-- <view style="height: 10px;background-color: #F5F5F5;"></view> -->

		<!-- 空购物车背景 -->
		<view v-if="cartList.length<=0" style="width: 100%;height: 250px;">
			<view class="glance-shop-cart-nullcart"></view>
			<view style="height: 30px;width: 100%;font-size: 15px;line-height: 30px;text-align: center;">您的购物车为空，快去添加心爱的商品吧！</view>
		</view>

		<!-- 购物车商品 -->
		<view v-for="(thiscart,index) in cartList" :key="index" style="background-color: #FFFFFF;">
			<!-- 按营销活动分组的商品 -->
			<scroll-view style="width: 100%;white-space: nowrap;" scroll-x="true" :scroll-left='scrollposition'
			 scroll-with-animation="true" v-if="thiscart.ID > -99">
				<view class="glance-shop-cart-scrollx-items" style="display: inline-block;width: 100%;">
					<view class="glance-shop-cart-scrollx-items-item">
						<!-- 勾选 -->
						<view style="width: 10%;height: 100%;background-color: #FFFFFF;">
							<!-- 勾选 -->
							<view class="glance-shop-cart-scrollx-items-item-sel" :class="[ thiscart.ID > 0 ? 'glance-shop-cart-itemselected-img':'glance-shop-cart-itemunselected-img']"
							 @click="clickitemselected(item.ID)"></view>
						</view>
						<!-- 图片 -->
						<view style="width: 30%;height: 100%;text-align:center;">
							<image :src="'https://restest.bestcake.com/m-images/cart/'+thiscart.Name+'.png'" mode="scaleToFill" style="height: 75px;width: 75px;line-height: 80px;padding-top: 5px;"
							 @click="clickitemhref(thiscart)"></image>
						</view>
						<!-- 描述 -->
						<view class="glance-shop-cart-items-item-des">
							<!-- 名称 -->
							<view class="sigle-line-text" style="font-size: 16px;height: 33.33%;text-align: left;" @click="clickitemhref(thiscart.href)">{{ thiscart.Name }}</view>
							<!-- 属性 -->
							<view class="sigle-line-text" style="font-size: 13px;height: 33.33%;text-align: left;color: #ADADAD;" @click="clickitemhref(thiscart.href)">{{ thiscart.Brand }}</view>
							<!-- 价格 & 数量-->
							<view class="glance-shop-cart-items-item-pq">
								<view class="sigle-line-text" style="font-size: 15px;text-align: left;width: 50%;">￥{{thiscart.CurrentPrice.toFixed(2)}}</view>
								<!-- 数量操作 -->
								<view class="glance-shop-cart-items-item-opt">
									<!-- 减数量 -->
									<view class="glance-shop-cart-items-item-opt-quantity-minus" @click="minusitem(thiscart)">-</view>
									<!-- 数量 -->
									<view class="glance-shop-cart-items-item-opt-quantity">{{ thiscart.Num }}</view>
									<!-- 加数量 -->
									<view class="glance-shop-cart-items-item-opt-quantity-plus" @click="plusitem(thiscart)">+</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 删除 -->
				<view class="glance-shop-cart-del" @click="delModel(thiscart)">
					<view class="glance-shop-cart-del-img"></view>
				</view>

			</scroll-view>
			<view style="height: 10px;background-color: #F5F5F5;"></view>
		</view>
		<!-- 购买此商品的人还买了 -->
		<!-- <view style="height: 750px;background-color: #FFFFFF;" v-if="cntitems>0">购买此商品的人还买了</view> -->
		<!-- <view style="height: 10px;background-color: #F5F5F5;"></view> -->
		<!-- 猜你喜欢 -->
		<!-- <view style="height: 750px;background-color: #FFFFFF;">猜你喜欢</view> -->

		<view style="height: 10px;background-color: #F5F5F5;"></view>
		<!-- 金额合计 -->
		<view class="glance-shop-cart-order" v-if="cartList.length>0">
			<!-- 全选 -->
			<view style="width: 12%;">
				<!-- 勾选 -->
				<view class="glance-shop-cart-scrollx-items-item-sel" :class="[ isselectedall ? 'glance-shop-cart-itemselected-img':'glance-shop-cart-itemunselected-img']"
				 @click="clickitemselectedall"></view>
			</view>
			<!-- 总数量 -->
			<view class="glance-shop-cart-total-cnt">已选：( {{ total }} )</view>
			<!-- 总金额 -->
			<view class="glance-shop-cart-total-amt">￥{{ totalPrice.toFixed(2) }}</view>
			<!-- 立即下单 -->
			<view class="glance-shop-cart-create-order" @click="goOrder">立即下单</view>
		</view>
	</view>
</template>
<script>
	import uniSwipeAction from '@/components/uni-swipe-action.vue';
	import cartapi from '@/api/cart/model.js'
	cartapi.cartName = "shopping-cart"
	export default {
		components: {
			uniSwipeAction
		},
		data() {
			return {
				cartList: [],
				total: 0,
				discout: 0,
				totalPrice: 0,
				isselectedall: true,
				scrollposition: 0,
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#007aff'
					}
				}]
			};
		},
		onShow() {
			this.init()
		},
		methods: {
			// scroll x 归位
			scrollhoming() {
				this.scrollposition = this.scrollposition - 1
				// console.log(this.scrollposition)
			},
			// scroll x 归位后重置 scrollposition
			scrollhomed() {
				this.scrollposition = 0
				// console.log(this.scrollposition)
			},
			init() {
				let list = cartapi.getCartList()
				this.cartList = list
				this.total = cartapi.cartNum

				let totalprice = 0
				list.map((item, idx) => {
					totalprice += parseFloat((item.CurrentPrice * item.Num).toFixed(2))
				})
				this.totalPrice = totalprice
			},
			delModel(cart) {
				let that = this
				uni.showModal({
					title: '提示',
					content: `是否确定删除${cart.Name}？`,
					success(r) {
						if (r.confirm) {
							cartapi.modify('del', cart)
							that.init()
							that.scrollposition = 0
						}
					}
				})
			},
			minusitem(cart) {
				let go = () => {
					cartapi.modify('reduce', cart)
					this.init()
				}
				if (cart.Num <= 1) {
					uni.showModal({
						title: '提示',
						content: `是否将${cart.Name}从购物车移除？`,
						success(r) {
							if (r.confirm) {
								go()
							}
						}
					})
				} else go()

			},
			plusitem(cart) {
				cartapi.modify('add', cart)
				this.init()
			},
			goOrder() {
				//先判断是否登录
				//跳转登录界面
				// uni.showLoading({
				// 	title: '正在加载模块...',
				// 	mask: true
				// })
				// this.$checkLoginState.checkloginstate(() => {
				// 	uni.navigateTo({
				// 		url: '../../pages/order/order'
				// 	})
				// }, () => {
				// 	uni.navigateTo({
				// 		url: '../../pages/order/order'
				// 	})
				// });
				
				uni.navigateTo({
					url: '../../pages/order/order'
				})
			}
		}
	};
</script>
<style lang="scss">
	// 单行文本样式
	.sigle-line-text {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: left;
	}

	.glance-shop-cart {
		width: 100%;
		// font-family: Arial, Helvetica, sans-serif;
	}

	// 滑动item 样式
	.glance-shop-cart-scrollx-items {
		width: 100%;
		height: 90px;
		display: flex;
		display: -webkit-flex;
		flex-flow: row nowrap;
		align-items: flex-start;
		justify-content: space-between;
		// padding: 10px 0 10px 0;
		margin-top: 10px;
	}

	// 滑动区域内item 样式
	.glance-shop-cart-scrollx-items-item {
		display: flex;
		display: -webkit-flex;
		flex-flow: row nowrap;
		align-items: flex-start;
		justify-content: flex-start;
		width: 100%;
		height: 100%;
	}

	// item 勾选样式
	.glance-shop-cart-scrollx-items-item-sel {
		position: relative;
		top: 30%;
		left: 60%;
		;
	}

	// item 描述信息样式
	.glance-shop-cart-items-item-des {
		width: 60%;
		height: 100%;
		display: -webkit-flex;
		flex-flow: column nowrap;
		align-items: flex-start;
		justify-content: flex-start;
	}

	// 价格和数量样式
	.glance-shop-cart-items-item-pq {
		width: 100%;
		height: 33.33%;
		display: flex;
		display: -webkit-flex;
		flex-flow: row nowrap;
		align-items: flex-start;
		justify-content: space-between;
	}

	// 数量操作
	.glance-shop-cart-items-item-opt {
		display: flex;
		display: -webkit-flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		width: 50%;
		height: 100%;
		font-size: 20px;
		margin-right: 10px;
		text-align: center;
		color: #6C6C6C;
		line-height: 100%;

		// 减数量
		&-quantity-minus {
			border-style: solid;
			border-width: 1px 0px 1px 1px;
			border-color: #E0E0E0;
			width: 33.33%;
			height: 80%;
			position: relative;
			top: 25%;
			transform: translateY(-50%)
		}

		// 数量
		&-quantity {
			border-style: solid;
			border-width: 1px 1px 1px 1px;
			border-color: #E0E0E0;
			width: 33.33%;
			height: 80%;
			font-size: 13px;
			position: relative;
			top: 25%;
			transform: translateY(-50%);
		}

		// 加数量
		&-quantity-plus {
			border-style: solid;
			border-width: 1px 1px 1px 0;
			border-color: #E0E0E0;
			width: 33.33%;
			height: 80%;
			position: relative;
			top: 25%;
			transform: translateY(-50%);
		}
	}

	// 底部汇总和订单样式
	.glance-shop-cart-order {
		width: 100%;
		height: 60px;
		background-color: #ffffff;
		display: flex;
		display: -webkit-flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: var(--window-bottom);
	}

	// 合计金额样式
	.glance-shop-cart-total-cnt {
		width: 30%;
		text-align: left;
		line-height: 40px;
		font-size: 13px;
		margin-left: 15px;
	}

	// 合计金额样式
	.glance-shop-cart-total-amt {
		width: 35%;
		text-align: right;
		margin-right: 15px;
		line-height: 40px;
		font-size: 16px;
		margin-left: 10px;
		color: #f40;
	}

	// 生成订单样式
	.glance-shop-cart-create-order {
		width: 30%;
		background-color: #DC143C;
		text-align: center;
		line-height: 40px;
		font-size: 0.8rem;
		color: #ffffff;
		margin-right: 10px;
	}

	// item 选择样式
	// 不勾选
	.glance-shop-cart-itemunselected-img {
		width: 16px;
		height: 16px;
		border: solid 1px lightgray;
		border-radius: 50%;
	}

	// 勾选
	.glance-shop-cart-itemselected-img {
		width: 20px;
		height: 20px;
		background-size: 20px 20px;
		background-repeat: no-repeat;
		background-image: url()
	}

	.glance-shop-cart-del {
		display: inline-block;
		width: 18%;
		height: 90px;
		background-color: red;
	}

	// 删除商品背景样式
	.glance-shop-cart-del-img {
		width: 30px;
		height: 30px;
		background-repeat: no-repeat;
		position: relative;
		top: 25%;
		transform: translateY(-50%);
		left: 50%;
		transform: translateX(-50%);
		background-image: url()
	}

	// 空购物车背景样式
	.glance-shop-cart-nullcart {
		width: 120px;
		height: 120px;
		position: relative;
		transform: translateY(-50%);
		left: 50%;
		transform: translateX(-50%);
		background-repeat: no-repeat;
		background-image: url()
	}
</style>
